<template>
    <!-- 最大盒子 -->
      <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="''" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'rgba(0,0,0,0)'" :onShareAppMessage="shareInfo">
        <view class="max_box" :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user_v1/yaoqingtongshibg.PNG)`,paddingTop: safeAreaInsets?.top + 'px',height:`calc(100vh - ${safeAreaInsets?.top}px)`}">
          <view class="modal_box">
            <view class="modal_title">邀请设置</view>
            <view class="text_red">*请谨慎选择，您需要邀请劳务外包人员！</view>
            <scroll-view scroll-y>
              <fui-form ref="formRole" top="0" :model="formData" :show="false" :errorPosition="2" :errorAlign="'left'">
                  <!-- 选择部门 -->
                  <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="公司：" prop="department_id">
                    <fui-input 
                      textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" disabled @tap="select_department" :disabledColor="'#F9FAFF'" placeholder="请选择公司" v-model="project" border="none"
                    >
                    </fui-input>
                  </fui-form-item>
             
                <!-- 合同年限 -->
                <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="合同年限：" prop="year">
                  <fui-input 
                    textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" disabled @tap="contract_term" :disabledColor="'#F9FAFF'" placeholder="请选择合同年限" v-model="formData.year" border="none"
                  >
                  </fui-input>
                </fui-form-item>
                <!-- 工作地点 -->
                <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="城市：" prop="city">
                  <fui-input 
                    textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" disabled @tap="select_city" :disabledColor="'#F9FAFF'" placeholder="请选择城市" v-model="formData.city" border="none"
                  >
                  </fui-input>
                </fui-form-item>
             
                <!-- 试用期 开始 - 结束 -->
                <fui-form-item :labelWidth="200" :labelSize="26" :bottomBorder="false" :asterisk="true" label="试用期合同结束日期：" prop="probation_start">
                  <fui-input textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" disabled @tap="probationary_period" type="text" :disabledColor="'#F9FAFF'" v-model="probationary" placeholder="请选择试用期合同结束日期" 
                  border="none">
                  </fui-input>
                </fui-form-item>
                <!-- 工作岗位 -->
                <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="工作岗位：" prop="position">
                  <fui-input 
                    textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" :disabledColor="'#F9FAFF'" placeholder="请输入工作岗位" v-model="formData.position" border="none"
                  >
                  </fui-input>
                </fui-form-item>
               
                <!-- 工资 -->
                <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="工资：" prop="salary">
                  <fui-input 
                    textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" :disabledColor="'#F9FAFF'" placeholder="请输入工资" v-model="formData.salary" border="none"
                  >
                  </fui-input>
                </fui-form-item>
                <!-- 试用期工资 -->
                <fui-form-item :labelWidth="180" :labelSize="26" :bottomBorder="false" :asterisk="true" label="试用期工资：" prop="probation_salary">
                  <fui-input 
                    textAlign="right" :borderBottom="false" :padding="[0]" :size="26" :clearable="false" type="text" :disabledColor="'#F9FAFF'" placeholder="请输入试用期工资" v-model="formData.probation_salary" border="none"
                  >
                  </fui-input>
                </fui-form-item>
              </fui-form>
               <!-- 签署等级表 -->
               <fui-form-item :labelWidth="350" :labelSize="26" :bottomBorder="false" :asterisk="true" label="签署电子入职登记表：" prop="is_enrollment">
                <fui-radio-group  @change="is_enrollment_change">
                  <view class="fui-list__item">
                    <fui-label v-for="(item,index) in radioItems" :key="index" >
                        <view class="fui-list__cell">
                          <fui-radio :checked="item.checked" :value="item.value" borderRadius="30rpx"
                          >
                          </fui-radio>
                          <text class="fui-text">{{item.name}}</text>
                        </view>
                    
                    </fui-label>
                  </view>
                </fui-radio-group>
                </fui-form-item>
                 <!-- 是否签署电子劳务合同。0=否，1=是 -->
               <fui-form-item :labelWidth="350" :labelSize="26" :bottomBorder="false" :asterisk="true" label="签署电子劳务合同：" prop="is_contact">
                <fui-radio-group  @change="is_contact_change">
                  <view class="fui-list__item">
                    <fui-label v-for="(item,index) in radioContactItems" :key="index" >
                        <view class="fui-list__cell">
                          <fui-radio :checked="item.checked" :value="item.value" borderRadius="30rpx"
                          >
                          </fui-radio>
                          <text class="fui-text">{{item.name}}</text>
                        </view>
                    
                    </fui-label>
                  </view>
                </fui-radio-group>
                </fui-form-item>
            </scroll-view>
          </view>
          <view class="button_text">
            <view class="button" @tap="generate">生成邀请海报</view>
          </view>
        </view>
      </s-layout>
      <!-- 底部弹出组件 && 部门弹出 -->
      <s-project-class @selectedData="switchTitle" @subcomponentSearch="subcomponentSearch" :arrayList="projectDataList" ref="popupListRef" :searchBoxIsShow="false" :showGoLink="false"></s-project-class>
      <!-- 选择工作地点 && 弹出 -->
      <up-picker :defaultIndex="[7,0]" :show="workplace_show" :closeOnClickOverlay="true" ref="workplace_Ref" :columns="workplace_columns" @close="workplace_close" @confirm="workplace_confirm" @change="workplace_changeHandler" @cancel="workplace_cancel"></up-picker>
      <!-- 选择合同年限 && 弹出 -->
      <fui-picker :options="age_limit_options" :show="age_limit_show" @change="age_limit_change" @cancel="age_limit_cancel"></fui-picker>
      <!-- 选择试用期 && 弹出 -->
      <fui-date-picker :show="show_scope" range type="3" :minDate="time.minDate" :maxDate="time.maxDate" @change="confirm_scope" @cancel="close_scope" ></fui-date-picker>
     
  </template>
  
  <script setup>
    import { ref,computed, reactive } from "vue";
    import { baseUrl } from "@/sheep/config";
    import sheep from '@/sheep';
    const { safeAreaInsets } = uni.getSystemInfoSync()
    import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
    import { onLoad } from "@dcloudio/uni-app";
    import { province,city } from './city.js'
   
    onLoad(() => {
      let params= {
        is_daily_yield:'0',
        is_all:'1',
        is_include_main:'1'
      }
      projectList(params)
  
      
    })
  
  
    const formData =  reactive({
      year:'',            // 合同年限
      city:'',            // 工作地点
      department_id:'',//邀请id
      probation_start:'', // 试用期-开始
      probation_end:'',   // 试用期-结束
      position:'',        // 工作岗位
      salary:'',      // 工资
      probation_salary:'',// 试用期工资
      is_enrollment:'1',//邀请同事 默认填写入职申请
      is_contact:'1'//是否签署电子劳务合同。0=否，1=是
  
    })
      const radioItems=ref([
          
            {
                          name: '是',
                          value: '1',
                          checked: true
                      },  {
                          name: '否',
                          value: '0',
                          checked: false
                      }
                      
                  ])
        const  is_enrollment_change=(e)=> {
          formData.is_enrollment =  e.detail.value
          
              }
  //是否签合同
  const radioContactItems=ref([
            {
                          name: '是',
                          value: '1',
                          checked: true
                      },  {
                          name: '否',
                          value: '0',
                          checked: false
                      }
                      
                  ])
        const  is_contact_change=(e)=> {
          formData.is_contact =  e.detail.value
              
              }
    // 表单验证
  const rules = [
  {
        name: "department_id",
        rule: ["required"],
        msg: ["请选择公司"]
      },
    
    {
      name: "year",
      rule: ["required"],
      msg: ["请选择合同年限"]
    },
    {
      name: "city",
      rule: ["required"],
      msg: ["请选择工作地点"]
    },
    
    {
      name: "probation_start",
      rule: ["required"],
      msg: ["请选择试用期"],
    },
    {
      name: "position",
      rule: ["required"],
      msg: ["请输入工作岗位"]
    },
    {
      name: "probation_salary",
      rule: ["required"],
      msg: ["请输入试用期工资"]
    },
    {
      name: "salary",
      rule: ["required"],
      msg: ["请输入工资"]
    }
  ]
  
  const formRole = ref()
  
  
    const time = reactive({
      minDate:'',
      maxDate:'',
      monthNum:'13',
      intraday:[]
    })
  
    // 设置默认日期，最大值为今天，最小值为去年今天
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  if (month <= 9) {
      month = '0' + month;
  }
  if (day <= 9) {
      day = '0' + day;
  }
  let minyear = year - 1;
  time.minDate = year + '-' + month + '-' + day;
  time.maxDate = (year + 1) + '-01-01';
  time.intraday = [year + '-' + month + '-' + day]
  
  // 试用期
  const show_scope = ref(false)
  const probationary = ref()
  const probationary_period = () => {
    show_scope.value = true
  }
  const confirm_scope = (e) => {
    formData.probation_start = e.startDate.result
    formData.probation_end = e.endDate.result
    probationary.value = `${e.startDate.result} - ${e.endDate.result}`
    close_scope()
  }
  const close_scope = () => {
    show_scope.value = false
  }
  
  
  
    // 生成邀请劳务派遣海报
    const ids = ref()
    function generate() {
      // console.log('表单数据',formData);
      uni.$u.throttle(() => {
        formRole.value.validator(formData, rules,true).then(async res => {
          if(res.isPassed) {
            const resust = await sheep.$api.app.Post_enpiboly_invite_add(formData);
            ids.value = resust.data.ids
            if(resust.code == 1) {
              sheep.$helper.toast(resust.msg);
              setTimeout(function () {
                showShareModal();
                // sheep.$router.back()
              }, 500);
            } else {
              sheep.$helper.toast(resust.msg);
            }
  
          } else {
            sheep.$helper.toast('请仔细核对内容！');
          }
        }).catch((err) => {
          console.log(err);
        });
      }, 500)
    }
  // 分享同事
  const shareInfo = computed(() => {
  return sheep.$platform.share.getShareInfo(
    {
      title: '',
      desc:'',
      params: {
        page: '6',
        query: `${ids.value}`,
      },
    },
    {
      type: 'Invite_colleagues', // 邀请同事海报
  
    },
  );
  })
  
      // 切换部门
      const project = ref()
      const popupListRef = ref()
     
  
      const select_department = () => {
        popupListRef.value.open()
      }
  
      const switchTitle = (item) => {
        project.value = item.jointTitles
        formData.department_id = item.id
      }
      // 调用接口：获取项目列表
      const projectDataList = ref([])
  
      // 封装项目列表接口
      const projectList = async (params = null) => {
        const res = await sheep.$api.app.getDepartment(params);
        projectDataList.value = res.data;
      };
   
    // 选择城市
    const workplace_Ref = ref(null)
    const workplace_show = ref(false)
    const workplace_columns = ref([province,city[7]]);
    const workplace_columnData = ref(city)
    const select_city = () => {
      workplace_show.value = true
    }
        // 关闭
    const workplace_close = () => {
      workplace_show.value = false
    }
        // 确定
    const workplace_confirm = (e) => {
      formData.city = e.value[1]
      workplace_close()
    };
        // 取消
    const workplace_cancel = () => {
      workplace_close()
    }
        // 根据一级联动切换二级联动
    const workplace_changeHandler = (e) => {
      const { columnIndex, value, values, index } = e;
      if (columnIndex === 0) {
        workplace_Ref.value.setColumnValues(1, workplace_columnData.value[index]);
      }
    };
  
    // 选择年限
    const contract_term = () => {
      age_limit_show.value = true
    }
    const age_limit_options = ref(['1','2','3','4','5','6','7','8','9','10'])
    const age_limit_show = ref(false)
    const age_limit_change = (e) => {
      age_limit_show.value = false
      formData.year = e.text
    }
  
    const age_limit_cancel = () => {
      age_limit_show.value = false
    }
  
  </script>
  
  <style lang="scss" scoped>
    .max_box {
      position: relative;
      background-size: cover;
      background-position: center;
      padding: 0 40rpx;
    }
  
    .modal_box {
      padding: 40rpx 26rpx 40rpx 26rpx;
      height: 740rpx;
      border-radius: 20px;
      background-color: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
      margin: 540rpx auto 0 auto;
      scroll-view {
        width: 100%;
        height: calc(100% - 174rpx);
      }
    }
  
    .modal_title {
      margin: 0 auto 40rpx auto;
      font-family: HelloFont-WenYiHei;
      color: #333333;
      font-weight: 700;
      font-size: 44rpx;
      font-style: normal;
      text-decoration: none;
      text-align: center;
    }
  
    .Select_unchecked {
      border-radius: 24px;
      border: 2px solid #999999;
      height: 88rpx;
      font-family: PingFangSC;
      color: #999999;
      font-weight: 600;
      font-size: 26rpx;
      font-style: normal;
      text-decoration: none;
      text-align: left;
      line-height: 88rpx;
      padding: 0 40rpx;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  
    .Select_checked {
      border-radius: 24px;
      border: 2px solid #0038F7;
      height: 88rpx;
      font-family: PingFangSC;
      color: #0038F7;
      font-weight: 600;
      font-size: 26rpx;
      font-style: normal;
      text-decoration: none;
      text-align: left;
      line-height: 88rpx;
      padding: 0 40rpx;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  
  
  
    .text_top {
      font-family: PingFangSC;
      color: #666666;
      font-weight: 400;
      font-size: $uni-font-size-big;
      font-style: normal;
      text-decoration: none;
      text-align: center;
    }
  
    .text_bottom {
      font-family: PingFangSC;
      color: #666666;
      font-weight: 400;
      font-size: $uni-font-size-big;
      font-style: normal;
      text-decoration: none;
      text-align: center;
      margin-bottom: 100rpx;
    }
  
    .button_text {
        margin-top: 20rpx;
      .button {
        margin: 0 auto;
        height: 90rpx;
        line-height: 90rpx;
        font-family: PingFangSC;
        color: #FFFFFF;
        font-weight: 500;
        font-size: $uni-font-size-big;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        border-radius: 25px;
        background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
      }
    }
  
    .text_red {
      font-family: PingFangSC;
      color: #FF0000;
      font-weight: 600;
      font-size: 26rpx;
      font-style: normal;
      text-decoration: none;
      text-align: center;
      margin-bottom: 40rpx;
    }
  .fui-list__item{
          display: flex;
          align-items: center;
      justify-content: flex-end;
      .fui-text {
          font-size: 26rpx;
          padding-left: 16rpx;
      margin-right: 20rpx;
      }
  }
  :deep(.fui-form__wrap){
    text-align: right;
  }
  </style>